<template>
  <div>
    <common-head title="购物车"></common-head>
    <div class="wrap">
      <van-notice-bar
        @click="Login"
        v-if="!isLogin()"
        left-icon="volume-o"
        text="还没有登录，赶快去登录吧！！！"
      />
      <div class="items">
        <div class="box" v-if="!items.length">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/cart/cart-empty.png" alt="">
          <h2>您的购物车空空如也!!</h2>
          <van-button type="default" to="/home">去逛逛</van-button>
        </div>
        <van-swipe-cell v-for="(item, index) in items" :key="item.id">
          <div class="item">
              <van-checkbox @click="itemCheckClick(index)" v-model="item.checked" shape="square"/>
              <van-card
                :num="item.num"
                :price="item.minPrice"
                :title="item.name"
                :thumb="item.pic"
              >
              <template #footer>
                <van-stepper @change="itemNumChange" v-model="item.num"></van-stepper>
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button square text="删除"
              @click="delItem(index)"
              type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
      <van-submit-bar :price="total*100"  button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <my-tabbar/>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import { mapState, mapMutations } from 'vuex'
import CommonHead from '@components/CommonHead'
import { Dialog } from 'vant'
import { isLogin } from '@/utils'
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.calc_total()
  },
  methods: {
    isLogin,
    Login () {
      this.$router.push(`/login`)
    },
    delItem (index) {
      Dialog.confirm({
        title: '删除商品',
        message: '您确认删除吗'
      })
        .then(() => {
          this.del_item(index)
          this.calc_total()
        })
        .catch(() => {
          // on cancel
        })
    },
    itemCheckClick (i) {
      // console.log(this.items[i].checked)
      this.set_single_checked({
        index: i,
        checked: this.items[i].checked
      })

      const allCheced = this.items.every(item => item.checked)
      // console.log(allCheced)
      this.set_allChecked(allCheced)
      this.calc_total()
    },
    initContact () {
      // 订单联系人
      if (!this.contacts.length) {
        // 没有联系人
        return {}
      } else {
        // 判断是否有默认联系人
        const defaultContact = this.contacts.find(contact => contact.isDefault)
        if (defaultContact) {
          return defaultContact
        } else {
          // 第一个联系人是 订单联系人
          return this.contacts[0]
        }
      }
    },
    onSubmit () {
      if (isLogin()) {
        // 生成订单数据
        const currentOrder = {
          id: Date.now(),
          code: Date.now(),
          status: 0, // 0 待支付
          items: this.items.filter(item => item.checked),
          total: this.total,
          contact: this.initContact()
        }
        // 生成订单
        this.set_order(currentOrder)
        this.$router.push('/currentOrder')
      } else {
        this.$router.push({
          path: '/login',
          query: {
            from: '/cart'
          }
        })
      }
    },
    itemNumChange () {
      // 步进器 改变了 商品数量
      this.updata_items(this.items)
      this.calc_total()
    },
    ...mapMutations('cart', ['calc_total', 'updata_items', 'set_single_checked', 'set_allChecked', 'set_all_single_checked', 'del_item']),
    ...mapMutations('order', ['set_order'])
  },
  computed: {
    ...mapState({
      items: state => JSON.parse(JSON.stringify(state.cart.items)),
      total: state => state.cart.total,
      contacts: state => state.contact.contacts
    }),
    allChecked: {
      get () {
        return this.$store.state.cart.allChecked
      },
      set (checked) {
        this.set_allChecked(checked)
        // 修改单选状态
        this.set_all_single_checked(checked)
        this.calc_total()
      }
    }
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  margin-top: 46px;
  margin-bottom: 100px;
  .box{
    text-align: center;
    color: #999;
    img{
      margin-top: 10px;
      width: 100%;
    }
    h2{
      font-size: 30px;
    }
  }
  .item{
    display: flex;
    background-color: #fafafa;
    .van-checkbox{
      margin: 0 8px;
    }
    .van-card{
      flex:1;
    }
  }
  .delete-button {
    height: 100%;
  }
  .van-submit-bar{
    bottom: 50px;
  }
  .van-multi-ellipsis--l2{
    max-height: 40px;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    line-height: 20px;
  }
}
.van-card__price-integer,.van-card__price{
  color: rgb(255, 0, 64);
  // font-weight: bold;
  font-size: 20px;
  margin-left: 3px;
}
</style>
